<template>
	<view class="forgetEnd">
		<u-form :model="form" ref="uForm" label-width="140">
			<u-form-item label="手机号" prop="phoneNumber">
				<u-input v-model="form.phoneNumber" placeholder="请输入手机号码" />
			</u-form-item>
			<u-form-item label="密码" prop="pwd">
				<u-input v-model="form.pwd" placeholder="请输入登录密码" type="password" />
			</u-form-item>
			<u-form-item label="确认密码" prop="pwdAgain">
				<u-input v-model="form.pwdAgain" placeholder="请再次输入登录密码" type="password" />
			</u-form-item>
			<u-form-item label="昵称" prop="userName">
				<u-input v-model="form.userName" placeholder="请输入用户名" />
			</u-form-item>
			<u-form-item label="邮箱" prop="email">
				<u-input v-model="form.email" placeholder="请输入邮箱" />
			</u-form-item>
		</u-form>
		<view class="dlbutton" hover-class="dlbutton-hover" @click="sign"><text>注 册</text></view>
	</view>
</template>
<script>
import { sign } from '@/api/auth.js';
export default {
	name: 'Forget-end',
	data() {
		return {
			form: {
				userName: undefined, //用户名
				phoneNumber: undefined, //手机号
				pwd: undefined, //密码
				pwdAgain: undefined, //再次输入密码
				email: undefined //邮箱
			},
			rules: {
				userName: [
					{
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					}
				],
				phoneNumber: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				],
				pwd: [
					{
						required: true,
						message: '请输入密码，至少8位数',
						min: 8,
						trigger: ['blur', 'change']
					}
				],
				pwdAgain: [
					{
						required: true,
						message: '请再次输入密码',
						min: 8,
						trigger: ['blur', 'change']
					}
				],
				email: [
					{
						pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
						required: true,
						message: '请输入邮箱',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(option) {},
	methods: {
		// 注册按钮
		sign() {
			if (this.form.pwd !== this.form.pwdAgain) {
				uni.showToast({
					title: '两次密码不一致，请重新输入',
					duration: 2000,
					icon: 'none'
				});
				this.form.pwdAgain = undefined;
				return;
			}
			this.$refs.uForm.validate(valid => {
				if (valid) {
					let query = {
						userName: this.form.userName, //用户名
						phoneNumber: this.form.phoneNumber, //手机号
						pwd: this.form.pwd, //密码
						email: this.form.email //邮箱
					};
					sign(query).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '注册成功',
								duration: 2000
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 2000);
						} else {
							uni.showToast({
								title: res.message,
								duration: 2000,
								icon: 'none'
							});
						}
					});
				} else {
					console.log('验证失败');
				}
			});
		}
	}
};
</script>
<style scoped lang="scss">
.forgetEnd {
	padding: 5%;
	.dlbutton {
		color: #ffffff;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.dlbutton-hover {
		background: linear-gradient(-90deg, rgba(63, 205, 235, 0.9), rgba(188, 226, 158, 0.9));
	}
}
</style>
